<template>
  <app-dialog-form
      width='800px'
      title="组用户列表"
      :append-to-body="true"
      :primary-btn="false"
      @open="handleDialogOpen"
      @closed="handleDialogClosed"
  >
    <el-table
        :data="list"
        v-loading="listLoading"
        @sort-change="handleSortChange"
        stripe
        style="width: 100%"
    >
      <el-table-column fixed="left" type="selection" width="55"/>
      <el-table-column align="center" width="210px" prop="username" label="账号" />
      <el-table-column align="center" min-width="160px" prop="nickName" label="昵称"/>
      <el-table-column align="center" width="110px" prop="avatar" label="头像">
        <template #default="{row}">
          <app-avatar :size="40" :src="row.avatarUrl"></app-avatar>
        </template>
      </el-table-column>
      <el-table-column align="center" width="170px" prop="g.createdAt" sortable="custom" label="入群时间">
        <template #default="{row}">
          <el-tag type="info">{{row.createdAt }}</el-tag>
        </template>
      </el-table-column>
    </el-table>
    <app-pagination
        style="margin-top: 10px;"
        v-model:page="listParams.pageNum"
        v-model:limit="listParams.pageSize"
        :list-count="listCount"
        :load-list="handleDialogOpen"
        :disabled="listLoading"
    />
  </app-dialog-form>
</template>

<script lang="ts" setup>
import {PropType, reactive, ref} from 'vue';
import {IGroupInfo, IGroupUser, queryGroupUserList} from "@/api/group";
import {IListParams} from "@/api/types/common";

const props = defineProps({
  item: {
    type: Object as PropType<IGroupInfo>,
    default: () => {
    },
  },
});

const list = ref<IGroupUser[]>([]);
const listCount = ref(0);
const listLoading = ref(false);
const listParams = reactive<IListParams>({
  pageNum: 1,
  pageSize: 10,
  username: ''
});

// 排序
const handleSortChange = ({prop, order}: {
  prop: string; order: string;
}) => {
  listParams.sortField = prop;
  listParams.sortOrder = order
  handleDialogOpen();
};

// 加载数据
const handleDialogOpen = async () => {
  listLoading.value = true;
  const data = await queryGroupUserList({
    groupId:props.item?.groupId,
    ...listParams,
  }).finally(() => {
    listLoading.value = false;
  });
  list.value = data.rows;
  listCount.value = data.total;
};

const handleDialogClosed=()=>{

};

</script>


<style lang="scss" scoped>

</style>
